<template>
  <div>
    <el-form v-if="control" ref="controlEdit" :model="control" :rules="rules" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="说明" prop="Show">
            <el-input v-model="control.Show" :maxlength="50" placeholder="说明" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="占用宽度" prop="WidthRatio">
            <el-select v-model="control.WidthRatio" style="width: 100%;" placeholder="占用宽度">
              <el-option label="1/6" :value="6" />
              <el-option label="1/5" :value="5" />
              <el-option label="1/4" :value="4" />
              <el-option label="1/3" :value="3" />
              <el-option label="1/2" :value="2" />
              <el-option label="2/3" :value="23" />
              <el-option label="整行" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="显示样式" prop="ShowMode">
            <el-radio-group v-model="control.ShowMode" @change="refresh">
              <el-radio :label="0">列表</el-radio>
              <el-radio :label="1">卡片</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="16">
          <div class="controlView">
            <signpostControl
              :width="control.WidthRatio"
              :height="control.HeightGrid"
              :item="controlSet"
              :content-width="contentWidth"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header" style="text-align: right;line-height: 28px;">
              <span style="float: left;">入口列表</span>
              <div>
                <el-button size="mini" type="primary" @click="add(0)">添加应用入口</el-button>
                <el-button size="mini" type="primary" @click="add(1)">添加外部链接</el-button>
              </div>
            </div>
            <draggable
              v-model="appList"
              :sort="true"
              :group="appGroup"
            >
              <transition-group class="draggable-group">
                <div
                  v-for="(item, i) in appList"
                  :key="i"
                  :class="'app'+(curIndex == i ? ' active': '')"
                  @click="chiose(i)"
                >
                  <icon v-if="item.Icon" :icon="item.Icon" class="icon" />
                  <span class="title">{{ item.Name }}</span>
                  <div class="optList">
                    <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="edit(item, i)" />
                    <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="drop(i)" />
                  </div>
                </div>
              </transition-group>
            </draggable>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <signpostSet :visible.sync="visible" :index="curIndex" :link-type="linkType" :source="curItem" @save="saveRow" />
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import signpostSet from './signpostSet.vue'
import signpostControl from '../control/signpostControl.vue'
export default {
  components: {
    signpostSet,
    draggable,
    signpostControl
  },
  props: {
    contentWidth: {
      type: Number,
      default: null
    },
    source: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      control: null,
      appList: [],
      curItem: null,
      title: null,
      linkType: null,
      visible: false,
      curIndex: -1,
      controlSet: {
        ShowMode: 0,
        List: []
      },
      appGroup: {
        name: 'signpost',
        pull: false,
        put: false
      },
      rules: {
        ColNum: [
          {
            required: true,
            message: '列数不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    source: {
      handler(val) {
        if (val) {
          this.resetForm()
        } else {
          this.control = null
        }
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    resetForm() {
      const set = {
        Id: this.source.Id,
        Name: this.source.Name,
        Show: this.source.Show,
        WidthRatio: this.source.WidthRatio
      }
      if (this.source.ControlConfig && this.source.ControlConfig.ControlSet) {
        const conf = this.source.ControlConfig.ControlSet
        set.ShowMode = conf.ShowMode ?? 0
        this.appList = conf.List ?? []
      } else {
        set.ShowMode = 0
        this.appList = []
      }
      this.control = set
      this.refresh()
    },
    chiose(index) {
      this.curIndex = index
    },
    saveRow(index, data) {
      if (index === -1) {
        this.appList.push(data)
      } else {
        this.appList[index] = data
      }
      this.refresh()
    },
    save() {
      const that = this
      return new Promise((resolve, reject) => {
        that.$refs['controlEdit'].validate((valid) => {
          if (valid) {
            const data = that.getData()
            if (data == null) {
              reject()
              return
            }
            resolve(data)
          } else {
            reject()
            return false
          }
        })
      })
    },
    add(type) {
      this.linkType = type
      this.curItem = null
      this.curIndex = -1
      this.visible = true
    },
    edit(item, index) {
      this.linkType = item.LinkType
      this.curItem = item
      this.curIndex = index
      this.visible = true
    },
    refresh() {
      this.controlSet = {
        ShowMode: this.control.ShowMode,
        List: this.appList
      }
    },
    drop(index) {
      const title = '确认删除该快捷入口?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.appList.splice(index, 1)
        that.refresh()
      })
    },
    getData() {
      const data = {
        Name: this.control.Name,
        Show: this.control.Show,
        WidthRatio: this.control.WidthRatio,
        HeightGrid: 10,
        ControlConfig: {}
      }
      data.ControlConfig.ControlSet = {
        ShowMode: this.control.ShowMode,
        List: this.appList
      }
      return data
    }
  }
}
</script>
<style lang="css" scoped>
.demo {
    width: 100%;
    height: 200px;
}
.app {
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    cursor: pointer;
}
.app .icon {
    margin-right: 5px;
}
.app .optList {
    float: right;
}
.controlView {
    width: 100%;
    height: 600px;
    line-height: 600px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
}
</style>
